로딩 중이에요... 🐣
[코담]
웹개발·실전 프로젝트·AI까지, 파이썬·장고의 모든것을 담아낸 강의와 개발 노트
07 템플릿 상속과 재사용 구조 (로그인 & 회원가입 디자인) | ✅ 편저: 코담 운영자
7강 - 템플릿 상속과 재사용 구조 (로그인 & 회원가입 디자인)
디자인, 템플릿✨ 이번 강의 목표
- Django의 템플릿 상속(
extends)과 재사용(include) 구조 이해 - TailwindCSS를 활용한 로그인/회원가입 공통 레이아웃 구축
- base.html에 반복 구조 정리 및 유지보수 효율화
- block, include, static 태그 사용 방법 익히기
🧱 1. 템플릿 상속이란?
로그인과 회원가입 화면을 보면 공통으로 사용되는 UI 요소가 많습니다:
- 상단 여백, 가운데 박스 정렬
- 폼 하단의 "회원가입" 또는 "로그인" 링크
이런 공통 레이아웃을 한 번만 정의하고, 각 화면에서는 다른 부분만 덮어쓰기(재정의) 하도록 하는 것이 템플릿 상속입니다.
🔑 핵심 태그
| 태그 | 설명 |
|---|---|
{% extends "base.html" %} |
상위 템플릿으로부터 상속 시작 |
{% block content %} / {% endblock %} |
자식 템플릿에서 재정의될 영역 지정 |
🗂️ 2. 템플릿 구조 설계
templates/
├── users/
│ ├── base.html ← 공통 레이아웃 템플릿
│ ├── main.html ← 로그인 화면
│ ├── signup.html ← 회원가입 화면
│ └── footer.html ← 하단 푸터 모듈화
📄 3. base.html 작성
templates/users/base.html
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}</title>
<meta name="description" content="장고-인스타그램">
<meta name="keywords" content="HTML, JavaScript, Python, Tailwind CSS">
<meta name="author" content="macaronics.net">
<link href="{% static 'css/users/main.css' %}" rel="stylesheet">
</head>
<body>
<div>
{% block content %} content {% endblock %}
</div>
{% include "users/footer.html" %}
</body>
</html>
🔐 4. 로그인 템플릿(main.html)
templates/users/main.html
{% extends "users/base.html" %}
{% block title %}장고 인스타그램 | 로그인{% endblock title %}
{% block content %}
<div class="w-full flex flex-col items-center justify-center min-h-screen bg-gray-100">
<div class="w-full bg-white p-8 rounded-lg shadow-md max-w-md text-center">
<form action="{% url 'users:main' %}" method="post" class="space-y-4">
{% csrf_token %}
<input type="text" name="username" placeholder="사용자이름(아이디)" required class="w-full p-3 border rounded-lg">
<input type="password" name="password" placeholder="비밀번호" required class="w-full p-3 border rounded-lg">
{% if error_message %}
<div class="text-red-500 text-sm mt-1">{{ error_message }}</div>
{% endif %}
<button type="submit" class="w-full py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600">로그인</button>
</form>
<div class="mt-6">
<a href="{% url 'users:signup' %}" class="text-blue-500 hover:underline">회원가입</a>
</div>
</div>
</div>
{% endblock content %}
📝 5. 회원가입 템플릿(signup.html)
templates/users/signup.html
{% extends "users/base.html" %}
{% block title %}장고 인스타그램 | 회원가입{% endblock title %}
{% block content %}
<div class="w-full flex flex-col items-center justify-center min-h-screen bg-gray-100">
<div class="w-full bg-white p-8 rounded-lg shadow-md max-w-lg text-center">
<h1 class="text-xl font-bold text-gray-800 mb-6">친구들의 사진과 동영상을 보려면 가입하세요.</h1>
<form action="{% url 'users:signup' %}" method="post" enctype="multipart/form-data" class="space-y-4">
{% csrf_token %}
{% for field in form %}
<div class="flex flex-col">
<div class="grid grid-cols-12 gap-2 items-center">
<span class="col-span-2"></span>
<div class="col-span-8">{{ field }}</div>
</div>
<div class="grid grid-cols-12 gap-2 items-center">
<div class="col-span-2"></div>
<div class="text-red-500 col-span-7 text-sm mt-1">{{ field.errors }}</div>
</div>
</div>
{% endfor %}
<button type="submit" class="w-8/12 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600">회원가입</button>
</form>
<div class="mt-6 text-sm">
이미 계정이 있으신가요? <a href="{% url 'users:main' %}" class="text-blue-600 hover:underline">로그인</a>
</div>
</div>
</div>
{% endblock content %}
🧩 6. 푸터 템플릿 구성 (footer.html)
공통적으로 사용되는 푸터는 별도의 템플릿 파일로 분리하여 관리합니다. 이렇게 하면 각 페이지에서 반복적으로 HTML을 작성할 필요 없이 include 태그 한 줄로 쉽게 재사용할 수 있습니다.
✅ 코드 예시: users/footer.html
<footer class="w-full h-12 flex text-center items-center justify-center">
macaronics.net
</footer>
base.html의{% include "users/footer.html" %}를 통해 자동 삽입되며, 전체 페이지 하단에 고정됩니다.
✅ 정리
- Base Template(
base.html)에 공통 구조, 메타, CSS 포함 {% block %},{% extends %},{% include %}활용한 템플릿 구조 정리- Tailwind CSS를 기반으로 로그인/회원가입 페이지 스타일링
- 푸터는
users/footer.html로 분리해 재사용 가능하게 구성
👉 다음 강의에서는 게시물 업로드 및 메인 페이지 구성을 진행합니다.
Python 코드 실행기
